<template xmlns:v-ref="http://www.w3.org/1999/xhtml">
    <div v-echo-page page-name="disp" id = "disp">
      <div class = "head">
        <div id = "model"> {{model}} </div>
        <div id = "transceiver-type"> &lt; {{transceiver}} &gt; </div>
        <div id = "range-type"> RANGE:{{range}} </div>
        <div id = "indicator">
          <img id = "indicatorImg" src = "../assets/indicator.png" >
          {{indicator.value.toUpperCase()}}
        </div>
        <div id = "status">
          <img id = "statusImg" src = "../assets/status.png" >
        </div>
      </div>

      <div class = "body">
        <div class = "nav-model">
          <fore-model :frame-width = "width"
                      :max-range = "maxRange" :depth = "depth">
          </fore-model>
        </div>

        <div class = "history-model" v-show = "model === 'HISTORY'">
          <history-model :frame-width = "width"
                         :max-range = "maxRange"
                         v-ref:history>
          </history-model>
        </div>

        <div class = "os-data-model" v-show = "model === 'OS DATA'">
          <os-data-model :fram-width = "width">
          </os-data-model>
        </div>
      </div>

      <div class = "tail">
        <div id = "tip">
          <div id = "description">
            <disp-descrip></disp-descrip>
          </div>
        </div>
        <div class = "localtime">
          Time:
          <span> {{time}}</span>
        </div>
      </div>

      <brilliance-set v-ref:brilliance></brilliance-set>
      <disp-alert v-ref:dispalert></disp-alert>

      <div class = "menu">
        <menu v-ref:menudisp>
        </menu>
      </div>

      <disp-func v-ref:dispfunc></disp-func>
    </div>
</template>

<script>
  import * as EchoKey from '../utils/echo-key'
  import EchoMenu from '../utils/echo-menu'
  import EchoTool from '../utils/echo-tool'
  import AlertData from '../utils/echo-alert-data'
  import {echo} from '../utils/echo'
  import * as menu from './menu.vue'
  import * as dispDescrip from '../components/disp-descrip.vue'
  import * as BrillianceSet from '../components/brilliance-set.vue'
  import * as dispAlert from '../components/disp-alert.vue'
  import * as historyModel from '../components/history-model.vue'
  import * as osDataModel from '../components/os-data-model.vue'
  import * as aftModel from '../components/aft-model.vue'
  import * as foreModel from '../components/fore-model.vue'
  import * as dispFunc from '../components/disp-func.vue'

  let FE8020 = EchoMenu.getMenuItems('menu/Sounder/FE-8020 No.1')
  let _sounder = EchoMenu.getMenuItems('menu/Sounder')
  let _range = EchoMenu.getMenuItems('menu/System/Range')
  let _rangeIndex = 3
  let _alarmDepth = EchoMenu.menu[1]

  let _timeout = -1                     //  定时器标志符

  function getDepth () {
    let _this = this
    let tmp = {
      depth: 0,
      seed: 1,
      gain: 4,
      time: 0,          //  得到该数据时间
      PICT: 'SLOW',
      clutterNum: 0,    //  杂波数量
      clutterPos: []    //  杂波位置
    }

    // 已运行时间
    tmp.time = new Date()

    echo.time = tmp.time.getTime()
    //  获取随机的水深
//    let _depth = EchoTool.Random.getSeed(33, 35)
    //  得到外部水深数据
    let _depth = EchoTool.depth

    _depth = _depth.toFixed(1)
    _depth = parseFloat(_depth)
    if (_this.$echo.poweron) {
      if (_depth < _this.maxRange) {
        EchoTool.depthRandom = _depth
        _this.depth = _depth
        tmp.depth = _depth
      } else {
        tmp.depth = 0
        EchoTool.depthRandom = 0
        _this.depth = 0
      }

      //   获取随机数种子
      if (FE8020[2].value === 'ON') {
        tmp.gain = 4
      } else {
        tmp.gain = FE8020[1].value
      }
      let _gain = tmp.gain
      let _seed = EchoTool.Random.getSeed(Math.pow(2, _gain), Math.pow(_gain, _gain))
      tmp.seed = _seed

      // 获取随机杂波数量
      let num = 0
      EchoTool.Random.seed = _seed
      switch (_gain) {
        case 3:
        case 4: {
          num = EchoTool.Random.seededRandom(0, 1.1)
//            console.log(num)
        } break

        case 5:
        case 6:
        case 7: {
          num = EchoTool.Random.seededRandom(1, _gain - 4)
        } break

        case 8:
        case 9: {
          num = EchoTool.Random.seededRandom(2, _gain - 4)
        } break
      }
//        num = Math.floor(num)
      num = parseInt(num)
//        console.log('===> num: ' + num)
      tmp.clutterNum = num

      //  根据杂波数量 随机获取 杂波位置
      for (let i = 0; i < num; i++) {
        let pos = EchoTool.Random.getSeed(0, _depth)
        tmp.clutterPos.push(pos)
      }

      //  获取PICT 值
      tmp.PICT = _sounder[3].value
      EchoTool.EchoData.push(tmp)
//        console.log(rand + '***' + _this.echoData.length)
    } else {
      EchoTool.EchoData.echoData = []
    }
  }

  let getDepthRandom = {
    start: function () {
      let _this = this
      _timeout = setInterval(function () {
        getDepth.call(_this)
      }, 1000)
    },
    reset: function (rangeIndex) {
      let _this = this
      if (_timeout >= 0) {
        clearInterval(_timeout)
        _timeout = -1
      }
      let _interval = 0
      switch (rangeIndex) {
        case 0:
        case 1:
        case 2: {
          _interval = 250
        } break

        case 3:
        case 4:
        case 5: {
          _interval = 500
        } break
        default: {
          _interval = 1000
        } break
      }
      _timeout = setInterval(function () {
        getDepth.call(_this)
      }, _interval)
    }
  }

  let activeTime = function () {
    function checkTime (s) {
      if (s < 10) {
        return '0' + s
      }
      return s
    }

    function getTime () {
      let m = 0
      let h = 0
      m = sec / 60
      if (m > 59) {
        h = sec / 3600
        h = Math.floor(h)
        m = (sec - h * 3600) / 60
        m = Math.floor(m)
      }
      m = Math.floor(m)
      h = checkTime(h)
      m = checkTime(m)
      return h + ':' + m
    }

    let _this = this
    let sec = 0

    setInterval(function () {
      sec++
      _this.time = getTime()
    }, 1000)
  }

  export default {
    components: {
      menu,
      dispDescrip,
      BrillianceSet,
      dispAlert,
      historyModel,
      osDataModel,
      aftModel,
      foreModel,
      dispFunc
    },
    data () {
      return {
        depthAlarm: EchoMenu.menu[1],
        time: '',
        width: 950,
        model: 'NAV',
        transceiver: 1,
        range: 'AUTO',
        indicator: _sounder[0],
        maxRange: 40,
        draught: 0,
        depth: 0
      }
    },
    created () {
    },
    ready () {
      getDepthRandom.start.call(this)
      activeTime.call(this)
    },
    computed: {
    },
    watch: {
      depth: function () {
        console.log('水深: ', this.depth)
        let _this = this
        let _tmp = {
          alertId: 0,
          time: EchoTool.getLocalTime(),
          day: EchoTool.getDate()
        }

        if (_this.depth < _alarmDepth.value) {
          if (AlertData.isInActiveAlert(230)) {
            console.log('报警还在列表')
            return
          }
          _this.$refs.dispalert.isShow = true
          _this.$refs.dispalert.alertId = 230
          _tmp.alertId = 230
          AlertData.activeAlert.push(_tmp)
          AlertData.alertLog.push(_tmp)
        }
      },
      'depthAlarm.value': function () {
        let _this = this

        let _alarmLine = _this.depthAlarm.value
        let _depth = _this.depth

        if (_depth <= _alarmLine) {
          if (AlertData.isInActiveAlert(230)) {
            console.log('水深警报还在列表')
            return
          }

          let _tmp = {
            alertId: 0,
            time: EchoTool.getLocalTime(),
            day: EchoTool.getDate()
          }

          _this.$refs.dispalert.isShow = true
          _this.$refs.dispalert.alertId = 230
          _tmp.alertId = 230
          AlertData.activeAlert.push(_tmp)
          AlertData.alertLog.push(_tmp)
        }
      }
    },
//    [EchoKey.MENU_ESC] (evt) {
//      debugger
//      if (this.$refs.brilliance.isShow) {
//        this.$refs.brilliance.$emit(EchoKey.MENU_ESC, evt)
//      } else {
//        this.$echo.routeTo('menu')
//      }
//    },
    [EchoKey.UP] (evt) {
      if (this.$refs.menudisp.isShowMenu) {
        this.$refs.menudisp.$emit(EchoKey.UP, evt)
      } else if (this.$refs.dispfunc.isShowFunc) {
        this.$refs.dispfunc.$emit(EchoKey.UP, evt)
      } else if (this.$refs.brilliance.isShow === true) {
        this.$refs.brilliance.$emit(EchoKey.UP, evt)
      } else {
        this.$refs.brilliance.isShow = true
      }
    },
    [EchoKey.DOWN] (evt) {
      if (this.$refs.menudisp.isShowMenu) {
        this.$refs.menudisp.$emit(EchoKey.DOWN, evt)
      } else if (this.$refs.dispfunc.isShowFunc) {
        this.$refs.dispfunc.$emit(EchoKey.DOWN, evt)
      } else if (this.$refs.brilliance.isShow === true) {
        this.$refs.brilliance.$emit(EchoKey.DOWN, evt)
      } else {
        this.$refs.brilliance.isShow = true
      }
    },
    [EchoKey.LEFT] (evt) {
      if (this.$refs.menudisp.isShowMenu) {
        this.$refs.menudisp.$emit(EchoKey.LEFT, evt)
      } else if (this.$refs.dispfunc.isShowFunc) {
        this.$refs.dispfunc.isShowFunc = false
      } else if (this.$refs.brilliance.isShow === true) {
        this.$refs.brilliance.$emit(EchoKey.LEFT, evt)
      } else if (this.model === 'HISTORY') {
        this.$refs.history.$emit(EchoKey.LEFT, evt)
      }
    },
    [EchoKey.RIGHT_ENT] (evt) {
      if (this.$refs.menudisp.isShowMenu) {
        this.$refs.menudisp.$emit(EchoKey.RIGHT_ENT, evt)
      } else if (this.$refs.dispfunc.isShowFunc) {
        this.$refs.dispfunc.$emit(EchoKey.RIGHT_ENT, evt)
      } else if (this.$refs.brilliance.isShow === true) {
        this.$refs.brilliance.$emit(EchoKey.RIGHT_ENT, evt)
      } else if (this.model === 'HISTORY') {
        this.$refs.history.$emit(EchoKey.RIGHT_ENT, evt)
      }
    },
    [EchoKey.ADD] (evt) {
      if (_sounder[4].value === 'ON') {
        return
      }
      _rangeIndex++
      if (_rangeIndex > 7) {
        _rangeIndex = 7
      }
      this.maxRange = _range[_rangeIndex].value
      this.range = (_rangeIndex + 1).toString()
      getDepthRandom.reset.call(this, _rangeIndex)
    },
    [EchoKey.SUB] (evt) {
      if (_sounder[4].value === 'ON') {
        return
      }
      _rangeIndex--
      if (_rangeIndex < 0) {
        _rangeIndex = 0
      }
      this.maxRange = _range[_rangeIndex].value
      this.range = (_rangeIndex + 1).toString()
      getDepthRandom.reset.call(this, _rangeIndex)
    },
    [EchoKey.PWR] (evt) {
      this.$refs.brilliance.isShow = false
      let _echo = this.$echo
      _echo.poweron = false
      _echo.routeTo('')
    },
    [EchoKey.DISP] (evt) {
      if (this.$refs.menudisp.isShowMenu) {
        this.$refs.menudisp.isShowMenu = false
      } else if (this.$refs.dispfunc.isShowFunc) {
        this.$refs.dispfunc.isShowFunc = false
      } else if (this.model === 'HISTORY') {
        this.model = 'OS DATA'
      } else if (this.model === 'OS DATA') {
        this.model = 'NAV'
      } else if (this.model === 'NAV') {
        this.model = 'HISTORY'
      }
    },
    [EchoKey.RIGHT_ENT + 'holdon'] (evt) {
      if (this.model === 'HISTORY') {
        this.$refs.history.$emit(EchoKey.RIGHT_ENT + 'holdon', evt)
      }
    },
    [EchoKey.LEFT + 'holdon'] (evt) {
      if (this.model === 'HISTORY') {
        this.$refs.history.$emit(EchoKey.LEFT + 'holdon', evt)
      }
    },
    [EchoKey.ALARM_ACK] (evt) {
      let _this = this
      _this.$refs.dispalert.isShow = false
    },
    [EchoKey.MENU_ESC] (evt) {
      if (this.$refs.brilliance.isShow) {
        this.$refs.brilliance.isShow = false
      } else if (this.$refs.menudisp.isShowMenu === false) {
        this.$refs.menudisp.isShowMenu = true
      }
    },
    [EchoKey.FUNC] (evt) {
      if (this.$refs.menudisp.isShowMenu) {
        this.$refs.menudisp.$emit(EchoKey.FUNC, evt)
      } else {
        this.$refs.dispfunc.isShowFunc = true
      }
    }
  }
</script>

<style lang = "less">
  #disp {
    background-color: black;
    color: white;
  }

  .head {
    /*float: left;*/
    height: 40px;
    text-align: left;
    font-size: 20px;
  }

  #model {
    display: inline-block;
    float: left;
    width: 100px;
    text-align: center;
    background-color: #0000f6;
    position: relative;
    left: 10px;
  }

  #transceiver-type {
    float: left;
    display: inline-block;
    position: relative;
    left: 20px;
  }

  #range-type {
    float: left;
    display: inline-block;
    position: relative;
    left: 350px;
  }

  #indicator {
    float: left;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    left: 400px;
    border: 1px solid;
    width: 150px;
  }

  #indicatorImg {
    width: 20px;
    position: relative;
    top: 5px;
  }

  #status {
    display: inline-block;
    position: relative;
    left: 450px;
    top: 8px;
  }
  .body {
    border: 2px solid dimgray;
    width: 10000px;
    height: 640px;
    text-align: left;

    .os-data-model {
      background-color: black;
      display: inline-block;
      position: relative;
      top: -635px;
    }

    .history-model {
      background-color: black;
      display: inline-block;
      position: relative;
      top: -635px;
    }

    .nav-model {
      position: relative;
      left: 5px;
    }
  }

  .menu {
    position: relative;
    left: 5px;
    top: -670px;
  }

  .noShowMenu {
    display: none;
  }

  #AFT {
    border:2px solid;
  }

  #FORE {
    border: 2px solid;
  }

  .tail {
    text-align: left;
    height: 40px;
  }

  #tip {
    display: inline-block;
    text-align: left;
  }

  #icon {
    display: inline-block;
    text-align: center;
  }

  #description {
    display: inline-block;
    text-indent: 10px;
  }

  .localtime {
    display: inline-block;
    position: relative;
    left: 450px;
    border-left: 2px solid;
  }
</style>
